<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<view class="header">
			<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
			<view class="tit f36 cfff">价格管理</view>
			<view class="btn f32 cfff" @tap="saveBtn">确定</view>
		</view>

		<view class="editorBox mb20">
			<view class="editor-item" @click="costOpen('a')">
				<view class="pic"><image src="../../static/images/icon_edit.png" mode="aspectFit"></image></view>
				<view class="text f32 cblue">统一设置成本价</view>
			</view>
			<view class="editor-item" @click="salesOpen('b')">
				<view class="pic"><image src="../../static/images/icon_edit.png" mode="aspectFit"></image></view>
				<view class="text f32 cblue">统一设置销售价</view>
			</view>
		</view>

		<view class="priceBox">
			<view class="price-item f32 c333">
				<view>规格</view>
				<view>成本价(¥）</view>
				<view>销售价(¥)</view>
			</view>
			<view class="price-item f32 c333" v-for="(item, index) in priceList" :key="index">
				<view>{{ item.spec_data[0] }} : {{ item.spec_data[1] }}</view>
				
				<view @click="costOpen(index)">
					{{ item.cost_price == '' ? '0.00' : item.cost_price }}
					<image src="../../static/images/icon_price.png" mode="aspectFit"></image>
				</view>
				<view @click="salesOpen(index)">
					{{ item.sell_price == '' ? '0.00' : item.sell_price }}
					<image src="../../static/images/icon_price.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 设置成本价弹窗 -->
		<uni-popup ref="CostPopup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请设置成本价</view>
					<view class="input-box"><input type="text" placeholder="请设置成本价" v-model="costPrice" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="costClose">取消</view>
						<view class="submit" @tap="costSubmit">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 设置设置销售价弹窗 -->
		<uni-popup ref="SalesPopup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请设置销售价</view>
					<view class="input-box"><input type="text" placeholder="请设置销售价" v-model="sellPrice" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="salesClose">取消</view>
						<view class="submit" @tap="salesSubmit">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			type: 0,
			costPrice: '', //成本价
			sellPrice: '', //销售价
			priceList: [], //规格列表
			index: 0 //给第几个加
		};
	},
	onLoad() {
		// 取缓存中刚才选的规格
		this.priceList = uni.getStorageSync('priceList');
	},

	methods: {
		costOpen(index) {
			this.type = index;
			this.index = index;
			this.costPrice = '';
			this.$refs.CostPopup.open();
		},
		costClose() {
			this.$refs.CostPopup.close();
		},
		salesOpen(index) {
			this.type = index;
			this.index = index;
			this.sellPrice = '';
			this.$refs.SalesPopup.open();
		},

		salesClose() {
			this.$refs.SalesPopup.close();
		},
		saveBtn() {
			this.priceList.forEach(item => {
				if (item.cost_price == '') {
					this.$sToast('请设置成本价');
					return;
				}
				if (item.sell_price == '') {
					this.$sToast('请设置销售价');
					return;
				}
			});
			console.log(this.priceList);
			uni.setStorageSync('priceList', this.priceList);
			// uni.navigateTo({
			// 	url: './productInfo'
			// });

			this.$back()
		},
		// 成本价
		costSubmit() {
			if (this.costPrice == '') {
				this.$sToast('请设置成本价');
			} else {
				// 如果是a,统计设置成本价
				if (this.type == 'a') {
					this.priceList.forEach(item => {
						item.cost_price = this.costPrice;
					});
					this.$refs.CostPopup.close();
					// console.log(this.list);
				} else {
					this.priceList[this.index].cost_price = this.costPrice;
					this.$refs.CostPopup.close();
				}
			}
		},
		// 销售价
		salesSubmit() {
			if (this.sellPrice == '') {
				this.$sToast('请设置销售价');
			} else {
				// 如果是b,统计设置销售价
				if (this.type == 'b') {
					this.priceList.forEach(item => {
						item.sell_price = this.sellPrice;
					});
					this.$set(this.priceList, this.index, this.priceList[this.index]);
					this.$refs.SalesPopup.close();
					// console.log(this.list);
				} else {
					this.priceList[this.index].sell_price = this.sellPrice;
					this.$set(this.priceList, this.index, this.priceList[this.index]);
					this.$refs.SalesPopup.close();
				}
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #249af6;
	padding: 60upx 30upx 25upx 30upx;
	.arrow {
		image {
			width: 20upx;
			height: 40upx;
		}
	}
}
.editorBox {
	background-color: $white-background;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 25upx 30upx;
	.editor-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 50%;
		.pic {
			image {
				width: 44upx;
				height: 44upx;
				margin-right: 20upx;
				vertical-align: middle;
			}
		}
	}
}
.priceBox {
	background-color: $white-background;
	padding: 30upx 0 100upx 0;
	.price-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx #eee solid;
		padding: 0 30upx 30upx;
		margin-bottom: 35upx;
		view {
			width: 33.333%;
			float: left;
			&:nth-child(3n + 2) {
				text-align: center;
			}
			&:last-child {
				text-align: right;
			}
			image {
				width: 33upx;
				height: 35upx;
				margin-left: 15upx;
				vertical-align: middle;
			}
		}
	}
}
</style>
